<template>
  <div class="app-container flex flex-col">
    <GroupsHeader v-model="activeName" :groups="TEN_HEAD_GROUPS" />
    <div class="flex-1 relative">
      <template v-if="activeName === 'group'">
        <RangeLine
          :key="key_01"
          :groups="TEN_HEAD_GROUPS"
          :y-value-increment="0"
          :y-min="0"
          :y-max="4"
        ></RangeLine>
      </template>
      <template v-else-if="activeName === 'kill prev group accuracy'">
        <RangeLine
          :key="key_02"
          :show-line-type="2"
          :groups="TEN_HEAD_GROUPS"
          :y-value-increment="0"
        ></RangeLine>
      </template>
      <template v-else-if="activeName === 'group bar line'">
        <GroupBarLine :key="key_03" :groups="TEN_HEAD_GROUPS"></GroupBarLine>
      </template>
      <template v-else-if="activeName === 'number distribution'">
        <NumberDistribution
          :groups="TEN_HEAD_GROUPS"
          :row-size="6"
        />
      </template>
    </div>

  </div>
</template>

<script>
import DateLineViewMixin from '@/mixins/DateLineViewMixin.js'
import { TEN_HEAD_GROUPS } from '@/utils/study.js'

export default {
  name: 'HeadPage',
  mixins: [DateLineViewMixin],
  data() {
    return {
      TEN_HEAD_GROUPS
    }
  }
}
</script>
